<template>
    <div>
        <div class="header_input">
            <div class="mt-4">
                <el-input
                        v-model="this.input"
                        placeholder="请输入商品信息"
                        class="input-with-select">
                    <template #append>
                        搜索
                    </template>
                </el-input>
                <el-button
                        v-for="button in buttons"
                        :key="button.text"
                        :type="button.type"
                        link
                >{{ button.text }}</el-button>
            </div>
        </div>
        <div>

        </div>
    </div>
</template>

<script>

    export default {
        name: 'indexView',
        components: {

        },
        props: {
        },
        data(){
            return{
                input: "",
                buttons: [
                    { type: 'info', text: '衣服' },
                    { type: 'info', text: '手机' },
                    { type: 'info', text: '电器' },
                    { type: 'info', text: '家具' },
                    { type: 'info', text: '电脑' },
                    { type: 'info', text: '篮球' },
                ]
            }
        }
    }
</script>

<style scoped>
    .mt-4{
        position: absolute;
        left: 50%;
        margin-left: -16%;

    }
    .el-input{
        width: 120%;
    }
    .header_input{
        width: 100%;
        height: 80px;
        align-items: center;
        text-align:center;
        padding-top: 10px;
        /*border: 1px solid #969696;*/
        /*border-radius:25px;*/
        /*background-color: #d9d9d9;*/
    }
</style>
